<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" @click="handleChangeMessage" />
    <HelloWorld :msg="msg" />
    <ul>
      <li v-for="classInfo in globalInfo.classList" :key="classInfo.id">
        {{ classInfo.title }}
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld
  },
  computed: {
    globalInfo() {
      return this.$root.globalInfo;
    },
    msg() {
      return this.globalInfo?.headImg || "message";
    }
  },
  methods: {
    handleChangeMessage() {
      this.$root?.store?.commit("changeMessage", Math.random() + "");
    }
  }
};
</script>
